import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"


function Index() {
  useEffect(() => {
    console.log('enter index')
    return () => {
      console.log('leave index');
    };
  }, []);
  return (
    <h2>Index</h2>
  )
}
function List() {
  useEffect(() => {
    console.log('enter List')
    return () => {
      console.log('leave list')
    };
  }, []);
  return (
    <h2>List</h2>
  )
}


 function Example(){
  const [count , setCount] = useState(0); 
  useEffect(() => {
      console.log(`useEffect=>You clicked ${count} times`)
      console.log(111);
    return () => {
      console.log(222);
    };
  }, [count]);
  return (
    <div>
      <p>{count}</p>
      <button onClick={()=>{setCount(count+1)}}>加一</button>
      <Router>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/list/">列表页</Link></li>
        </ul>
        <Route path="/" exact component={Index}/>
        <Route path="/list/" exact component={List} />
      </Router>
    </div>
  )
}
export default Example;